<template>
	<view>
		<view class="c-box" id="personInfo">
		   <view class="personal">
            <!--
		        <view class="dl">
              <view class="dd">
                <view class="dd-span">手机绑定</view>
                <input type="text" v-model="phone" />
              </view>
              <view class="dd">
                <view class="dd-span">验证码</view>
                <input type="text" v-model="nocUser.verificationCode" style="width: 56%" placeholder="请输入验证码"/>
                <view style="color:#029e9d; width: 30%" @click="getCheckCodeVerification()">{{sendMsg}}</view>
              </view>
		        </view>
		        -->
		        <view class="c-h98" style="height: 2rem"></view>
            <!--
            <view class="btn" style="display:flex;justify-content: center;align-items: center; border-radius: 40px;font-size: 30rpx;background-color: #029e9d; margin: 0 40px; height: 40px;line-height: 40px;color: #FFFFFF;"
                  @click="replacePhone()">修改手机号</view>
            -->
         <view class="btn" style="display:flex;justify-content: center;align-items: center; border-radius: 40px;font-size: 30rpx;background-color: #f5f5f9; margin: 0 40px; height: 40px;line-height: 40px;color: #FB515F;"
               @click="loginOut()">退出登录</view>
		    </view>
		</view>
	</view>
</template>

<script>
import commonApi from '@/utils/commonMethod.js';
import setupApi from '@/api/setup.js';
export default {
	
	data() {
		return {
			nocUser: {
				id: '',
				phone: '',
				verificationCode: '',
			},
			NewNocUser: {
				phone: '',
				verificationCode: '',
			},
			sendMsg: '获取验证码',
			sendFlag: true,
			countdown: 60,
			currentUser: {},
			phone: '',
			showCheck: true,
			showBinding: false,
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	onShow(){
	  
	  setTimeout(()=> {
	    
	    if (getApp().globalData.onShow) {
	      getApp().globalData.onShow = 0;
	      console.log("demo前后台切换之切到前台")
	    }
	    else {
	      console.log("demo页面被切换显示")
	      this.startTime = +new Date();
	    }
	    
	  }, 100);
	},
	onHide(){
	  setTimeout(() => {
	    var that = this
	    if (getApp().globalData.onHide) {
	      getApp().globalData.onHide = 0;
	      console.log("还在当前页面活动")
	    }
	    else {
	      that.endTime = +new Date();
	      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
	      var stayTime = Math.round((that.endTime - that.startTime)/1000);
	       //这里获取到页面停留时间stayTime，然后了可以上报了
	       this.saveFootPrint(stayTime);
	    }
	  }, 100)
	},
	onUnload(){
	    setTimeout(() => {
	    var that = this
	    if (getApp().globalData.onHide) {
	      getApp().globalData.onHide = 0;
	      console.log("还在当前页面活动")
	    }
	    else {
	      that.endTime = +new Date();
	      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
	      var stayTime = Math.round((that.endTime - that.startTime)/1000);
	       //这里获取到页面停留时间stayTime，然后了可以上报了
	       this.saveFootPrint(stayTime);
	    }
	  }, 100)
	},
	async mounted() {
		await this.getCurrentUser();
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {
		saveFootPrint(stayTime){
		    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"设置")
		        
		},
		getCurrentUser(){
			commonApi.currentUserAxios().then(res =>{
				this.currentUser = res.data.session_user_h5;
				this.nocUser.id = this.currentUser.id;
				this.nocUser.phone = this.currentUser.phone;
				this.phone = this.currentUser.phone.substr(0,3)+'****'+this.currentUser.phone.substr(7,11);
			});
		},
		getCheckCodeVerification(e) {
		  if (!this.sendFlag) {
			return;
		  }
		  this.nocUser.phone = this.nocUser.phone.trim();
		  setupApi.checkNocUser(this.nocUser.phone).then(res =>{
			setupApi.getCheckCode(this.nocUser.phone);
			if (res.data.status == 1) {
			  this.settime()
			} else {
			}
		  });
		},
		//验证码定时器,60秒后可以再次获取
		settime(e) {
		  let that = this
		  if (this.countdown == 0) {
			this.sendMsg = "获取验证码";
			this.sendFlag = true;
			this.countdown = 60;
			return;
		  } else {
			this.sendMsg = "重新获取" + this.countdown + "s";
			this.sendFlag = false;
			this.countdown--;
		  }
		  setTimeout(function () {
			that.settime(e)
		  }, 1000)
		},
		// 修改手机号
		replacePhone() {
		  if(this.nocUser.phone){
			this.nocUser.phone = this.nocUser.phone.trim();
		  }
		  var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
		  if (!myreg.test(this.nocUser.phone)) {
			return;
		  }
		  setupApi.bindingPhone(this.nocUser.phone, this.nocUser.verificationCode,this.nocUser.id).then(res =>{
			if (res.data.code === 0) {
			  uni.showToast({
				"title": "绑定成功",
				"icon": "none",
			  });
			} else {
			  uni.showToast({
				"title": res.data.msg,
				"icon": "none",
			  });
			}
		  });
		},

		//登出
		loginOut() {
		  setupApi.loginOut().then(res => {
			//登录后清除弹窗状态
			uni.removeStorageSync('cookie')
			uni.removeStorageSync('register')
			if (res.data.code === 0) {
			  uni.showToast({
				"title": "退出成功",
				"icon": "none",
			  });
			  uni.reLaunch({
				url: '/pages/account/login/loginBy'
			  })
			} else {
			  uni.showToast({
				"title": res.data.msg,
				"icon": "none",
			  });
			}
		  })
		},

	}
}
</script>

<style>
	.personal .img {
	    width: 150rpx;
	    height: 150rpx;
	    margin: 30rpx auto;
	    position: relative;
	}
	.personal .img .touxiang{
	    width: 100%;
	    height: 100%;
	    border-radius: 50%;
	    overflow: hidden;
	}
	
	.personal .img .icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 1;
	}
	.personal .dl {
		padding: 0 35rpx;
	}
	.personal .dd {
		height: 80rpx;
		border-bottom: 1px solid #ebebeb;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
	}
	.personal .dd .dd-span {
		flex-shrink: 0;
		width: 115rpx;
		text-align: right;
		margin-right: 55rpx;
		color: #1a1a1a;
		font-size: 28rpx;
	}
	.personal .dd input {
		width: 100%;
		flex-shrink: 1;
		border: 0;
		height: 75rpx;
		font-size: 28rpx;
	}
</style>